import React, { Component } from 'react'

export default class App extends Component {

    state = {
        list: ['摇一摇', '晃一晃', '走一走', '看一看'],
        prolist: [
            {
                name: '小米',
                list: [
                    '米1',
                    '米2',
                    '米3',
                    '米4'
                ]
            }, {
                name: '华为',
                list: [
                    '为1',
                    '为2',
                    '为3',
                    '为4'
                ]
            },
            {
                name: '苹果',
                list: [
                    '果1',
                    '果2',
                    '果3',
                    '果4'
                ]
            }
        ]
    }

    render() {

        const str = this.state.prolist.map(item => {
            return (<li key={item.name}>
                <h3>{item.name}</h3>
                {item.list.map(it => {
                    return <span key={it}>{it}</span>
                })}
            </li>)
        })

        return (
            <div>
                <h1>App</h1>

                <ul>
                    {this.state.list.map(item => {
                        return (<li key={item}>{item}</li>)
                    })}
                </ul>


                <ol>
                    {this.state.prolist.map(item => {
                        return (<li key={item.name}>
                            <h3>{item.name}</h3>
                            {item.list.map(it => {
                                return <span key={it}>{it}</span>
                            })}
                        </li>)
                    })}
                </ol>


                <ol>
                    {str}
                </ol>
            </div>
        )
    }
}
